<template>
  <div class="trauma-process">
    <el-form inline>
      <el-radio v-model="radioDate" label="1" @change="changeDate">
        <span style="margin-right: 5px;">指定日期</span>
        <el-form-item label="年份：">
          <el-date-picker
            v-model="year"
            type="year"
            value-format="yyyy"
            size="mini"
            :disabled="radioDate == 2"
            placeholder="选择年"
          />
        </el-form-item>
        <el-form-item label="季度：">
          <el-select v-model="quarter" size="mini" placeholder="请选择" :disabled="radioDate == 2">
            <el-option label="第一季度" :value="1" />
            <el-option label="第二季度" :value="2" />
            <el-option label="第三季度" :value="3" />
            <el-option label="第四季度" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="月份：">
          <el-select v-model="month" size="mini" placeholder="请选择" :disabled="radioDate == 2">
            <el-option label="一月" :value="1" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="二月" :value="2" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="三月" :value="3" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="四月" :value="4" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="五月" :value="5" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="六月" :value="6" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="七月" :value="7" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="八月" :value="8" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="九月" :value="9" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="十月" :value="10" :disabled="quarter != '' && quarter != '4'" />
            <el-option label="十一月" :value="11" :disabled="quarter != '' && quarter != '4'" />
            <el-option label="十二月" :value="12" :disabled="quarter != '' && quarter != '4'" />
          </el-select>
        </el-form-item>
      </el-radio>
      <el-radio v-model="radioDate" label="2" @change="changeDate">
        <span style="margin-right: 5px;">其他时间</span>
        <el-form-item label="">
          <el-date-picker
            v-model="monthRange"
            type="monthrange"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            size="mini"
            format="yyyy-MM"
            value-format="yyyy-MM"
            :disabled="radioDate == 1"
          />
        </el-form-item>
      </el-radio>
      <el-form-item label="">
        <el-button type="primary" size="mini" @click="search">搜索</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
        <el-button type="primary" size="mini" @click="exportPPt">导出质控报告</el-button>
      </el-form-item>
    </el-form>
    <div class="trauma-process_content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>急救病例数量统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>已建档病例</div>
            <div>数据取值：</div>
            <div>1.创伤病例总数=创伤类型已建档的病例人数</div>
            <div>2.严重创伤病例数量=“创伤评估”中ISS评分≥16或单部位损伤AIS最大值 ≥3的病例数量</div>
            <div>3.严重创伤病例比例=严重创伤病例数量/创伤病例总数*100%</div>
            <div>4.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>"时间-年份、季度、月份；</div>
            <div>默认显示本年"</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div id="getPatientQty" style="width: 100%; height: 100%;" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>病情判断统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>已建档病例</div>
            <div>数据取值：</div>
            <div>1.全部病例“病情判断”的类型分布和占比情况</div>
            <div>2.总数=已建档病例人数，每类数量/总数=该类占比</div>
            <div>3.取“MPDS”-“病情判断”为非急、亚急、急症、危重、濒危、已死亡以及未填写病情判断的病例数据，其中未填写的计入“未知”</div>
            <div>4.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div id="getRiskGrade" style="width: 100%; height: 100%;" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>转院病例统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>转诊病例</div>
            <div>数据取值：</div>
            <div>1.总数=转入+转出</div>
            <div>2.转入/总数=转入占比</div>
            <div>3.转出/总数=转出占比</div>
            <div>4.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div id="getHospitalTransfer" style="width: 100%; height: 100%;" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全院转院病例来源统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>转入本院的病例</div>
            <div>数据取值：</div>
            <div>1.取“入院信息”-“外院转院”-“医院名称”所填写的医院名称</div>
            <div>2.总数=各医院转入病例总数</div>
            <div>3.该医院转入病例数量/总数=该医院转入占比</div>
            <div>4.按填写过的医院名称分类统计，未填写计入“未知”</div>
            <div>5.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <el-table :data="tableInData" height="500px" border style="width: 100%">
          <el-table-column prop="patientName" align="center" label="时间范围">
            <template slot-scope="scope">
              {{ scope.row.year + '-' + scope.row.month }}
            </template>
          </el-table-column>
          <el-table-column prop="hospitalName" align="center" label="医院名称" />
          <el-table-column prop="transferInNum" align="center" label="转入病例数量(例)" />
          <el-table-column prop="transferPercentage" align="center" label="占比(%)" />
        </el-table>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全院转院病例去向统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <el-table :data="tableOutData" height="500px" border style="width: 100%">
          <el-table-column prop="patientName" align="center" label="时间范围">
            <template slot-scope="scope">
              {{ scope.row.year + '-' + scope.row.month }}
            </template>
          </el-table-column>
          <el-table-column prop="hospitalName" align="center" label="医院名称" />
          <el-table-column prop="transferOutNum" align="center" label="转出病例数量(例)" />
          <el-table-column prop="transferPercentage" align="center" label="占比(%)" />
        </el-table>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>病人情况占比统计</span>
        </div>
        <div class="dignosis-content">
          <div v-if="Number(patientTotal) !== 0" style="position: relative;left: 48%;">总计:{{ patientTotal }}例
          </div>
          <div class="dignosis-div">
            <div id="getPatientRatio1" class="dignosis-style" />
            <div style="position: relative;left: 48%;">
              <span>
                性别
              </span>
              <el-popover placement="bottom" title="说明" width="400" trigger="hover">
                <div>考核对象：</div>
                <div>已建档病例</div>
                <div>数据取值：</div>
                <div>1.取“患者病历”-“性别”中男、女的数量和各自占总数的比例，以饼图呈现</div>
                <div>2.未填写计入“未知”</div>
                <div>3.按月统计，1个病例计1例，无重复计算</div>
                <div>查询筛选：</div>
                <div>时间-年份、季度、月份；</div>
                <div>默认显示本年</div>
                <i slot="reference" class="el-icon-info" style="color: #42cece;" />
              </el-popover>
            </div>

          </div>
          <div class="dignosis-div">
            <div id="getPatientRatio2" class="dignosis-style" />
            <div style="position: relative;left: 47%;">
              <span>
                年龄段
              </span>
              <el-popover placement="bottom" title="说明" width="400" trigger="hover">
                <div>考核对象：</div>
                <div>已建档病例</div>
                <div>数据取值：</div>
                <div>1.取“患者病历”-“年龄”中的数值</div>
                <div>2.未填写计入“未知”</div>
                <div>3.按未成年人(0-17岁)、青年人(18-65岁)、中年人(66-79岁)、老年人 (80-90岁以上)计算年龄段分布</div>
                <div>4.按月统计，1个病例计1例，无重复计算</div>
                <div>查询筛选：</div>
                <div>时间-年份、季度、月份；</div>
                <div>默认显示本年</div>
                <i slot="reference" class="el-icon-info" style="color: #42cece;" />
              </el-popover>
            </div>
          </div>
        </div>
        <div class="dignosis-content">
          <div class="dignosis-div">
            <div id="getPatientRatio3" class="dignosis-style" />
            <div style="position: relative;left: 46%;">
              <span>
                院前院内
              </span>
              <el-popover placement="bottom" title="说明" width="400" trigger="hover">
                <div>考核对象：</div>
                <div>已建档病例</div>
                <div>数据取值：</div>
                <div>1.院前取“患者病历”-“来院方式”为“本院急救车”、“当地120”的病例数量</div>
                <div>2.院内取“患者病历”-“来院方式”为“自行来院”、“外院转院”的病例数量</div>
                <div>3.计算两种类型的数量及各自占总数的比例，以饼图呈现</div>
                <div>4.按月统计，1个病例计1例，无重复计算</div>
                <div>查询筛选：</div>
                <div>时间-年份、季度、月份；</div>
                <div>默认显示本年</div>
                <i slot="reference" class="el-icon-info" style="color: #42cece;" />
              </el-popover>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>出车统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>所有创伤病例</div>
            <div>数据取值：</div>
            <div>1.取救护车角色建档病例数量</div>
            <div>2.按月统计，填其中任一项即计为完成,1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div id="getDepartureQty" style="width: 100%; height: 100%;" />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import ppt1 from '@/assets/ppt/ppt1.png'
import ppt2 from '@/assets/ppt/ppt2.png'
import ppt3 from '@/assets/ppt/ppt3.png'
import {
  getPatientQty,
  getRiskGrade,
  getHospitalTransfer,
  getTransferInNums,
  getTransferOutNums,
  getPatientRatio,
  getDepartureQty
} from '@/api/statistical/statisticTruma'

import pptxgen from 'pptxgenjs'
export default {
  data() {
    return {
      radioDate: '1',
      year: '',
      quarter: '',
      month: '',
      monthRange: [],
      tableInData: [],
      tableOutData: [],
      patientTotal: 0
    }
  },
  mounted() {
    this.initApi()
  },
  methods: {
    search() {
      this.initApi()
    },
    reset() {
      this.radioDate = '1'
      this.year = ''
      this.quarter = ''
      this.month = ''
      this.monthRange = []
      this.initApi()
    },
    changeDate(val) {
      console.log(val)
      if (val == 1) {
        this.monthRange = []
      } else if (val ==
                2) {
        this.year = ''
        this.quarter = ''
        this.month = ''
      }
    },
    initApi() {
      this.traumaGetPatientQty()
      this.traumaGetRiskGrade()
      this.traumaGetHospitalTransfer()
      this.tramuaGetTransferInNums()
      this.tramuaGetTransferOutNums()
      this.tramuaGetPatientRatio()
      this.tramuaGetDepartureQty()
    },
    notHaveData(chart) {
      chart.showLoading({
        text: '暂无数据',
        fontSize: 18,
        left: 'center',
        color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
        textColor: '#000', // 文字颜色
        maskColor: 'rgba(255, 255, 255, 0)' // 背景色
      })
    },
    traumaGetPatientQty() {
      const chartDom = document.getElementById('getPatientQty')
      const myChart = echarts.init(chartDom)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getPatientQty({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (!res.data) {
          this.notHaveData(myChart)
          return
        }
        console.log(res.data)
        if (res.data.total === 0) {
          this.notHaveData(myChart)
          return
        }
        const getPatientQty_total = res.data.total
        const subtotalCritical = res.data.subtotalCritical
        const percentageCritical = res.data.percentageCritical

        const timeLine = []
        const critical = []
        const sum = []
        res.data.patientQties.forEach(el => {
          timeLine.push(el.year + '-' + el.month)
          critical.push(el.critical)
          sum.push(el.sum)
        })

        const legendList = [
          {
            name: '创伤病人总数',
            value: getPatientQty_total
          }, {
            name: '严重创伤病人总数',
            value: subtotalCritical,
            rate: percentageCritical
          }]

        const option = {
          color: ['#027DB4', '#F59A23', '#E2596A', '#5EAFAF', '#008B8B', '#D4F2E7'],
          title: {
            text: '总计：' + getPatientQty_total + '例',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            // orient: 'vertical',
            // right: 0,
            top: '20px',
            formatter: name => {
              const legendData = legendList.filter(item => {
                return item.name == name
              })
              if (legendData[0].name === '严重创伤病人总数') {
                return legendData[0].name + '：' + legendData[0].value + '例 ' + legendData[0].rate + '%'
              } else {
                return legendData[0].name + '：' + legendData[0].value + '例'
              }
            }
          },
          grid: {
            top: 60
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: timeLine
          },
          yAxis: {
            name: '例',
            type: 'value'
          },
          series: [{
            name: '创伤病人总数',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: sum
          }, {
            name: '严重创伤病人总数',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: critical
          }
          ]
        }
        myChart.setOption(option)
      })
    },
    traumaGetRiskGrade() {
      const chartDom = document.getElementById('getRiskGrade')
      const myChart = echarts.init(chartDom)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getRiskGrade({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (!res.data) {
          this.notHaveData(myChart)
          return
        }
        console.log(res.data)
        if (res.data.total === 0) {
          this.notHaveData(myChart)
          return
        }
        console.log(1)
        console.log(res.data)
        const getRiskGrade_total = res.data.total
        const riskGradeBW = res.data.subtotalRiskGrade.riskGradeBW
        const riskGradeWZ = res.data.subtotalRiskGrade.riskGradeWZ
        const riskGradeJZ = res.data.subtotalRiskGrade.riskGradeJZ
        const riskGradeYJ = res.data.subtotalRiskGrade.riskGradeYJ
        const riskGradeFJ = res.data.subtotalRiskGrade.riskGradeFJ
        const riskGradeSW = res.data.subtotalRiskGrade.riskGradeSW
        const riskGradeUnknown = res.data.subtotalRiskGrade.riskGradeUnknown

        const riskGradeBW_rate = res.data.percentageRiskGrade.riskGradeBW
        const riskGradeWZ_rate = res.data.percentageRiskGrade.riskGradeWZ
        const riskGradeJZ_rate = res.data.percentageRiskGrade.riskGradeJZ
        const riskGradeYJ_rate = res.data.percentageRiskGrade.riskGradeYJ
        const riskGradeFJ_rate = res.data.percentageRiskGrade.riskGradeFJ
        const riskGradeSW_rate = res.data.percentageRiskGrade.riskGradeSW
        const riskGradeUnknown_rate = res.data.percentageRiskGrade.riskGradeUnknown

        const legendList = [
          { value: riskGradeBW, name: '濒危', rate: riskGradeBW_rate },
          { value: riskGradeWZ, name: '危重', rate: riskGradeWZ_rate },
          { value: riskGradeJZ, name: '急症', rate: riskGradeJZ_rate },
          { value: riskGradeYJ, name: '亚急', rate: riskGradeYJ_rate },
          { value: riskGradeFJ, name: '非急', rate: riskGradeFJ_rate },
          { value: riskGradeSW, name: '死亡', rate: riskGradeSW_rate },
          { value: riskGradeUnknown, name: '未知', rate: riskGradeUnknown_rate }
        ]

        const timeLine = []
        const riskGradeBW_list = []
        const riskGradeWZ_list = []
        const riskGradeJZ_list = []
        const riskGradeYJ_list = []
        const riskGradeFJ_list = []
        const riskGradeSW_list = []
        const riskGradeUnknown_list = []

        res.data.qtyRiskGrades.forEach(el => {
          timeLine.push(el.year + '-' + el.month)
          riskGradeBW_list.push(el.riskGradeBW)
          riskGradeWZ_list.push(el.riskGradeWZ)
          riskGradeJZ_list.push(el.riskGradeJZ)
          riskGradeYJ_list.push(el.riskGradeYJ)
          riskGradeFJ_list.push(el.riskGradeFJ)
          riskGradeSW_list.push(el.riskGradeSW)
          riskGradeUnknown_list.push(el.riskGradeUnknown)
        })
        const option = {
          color: ['#027DB4', '#F59A23', '#E2596A', '#5EAFAF', '#008B8B', '#D4F2E7'],
          title: {
            text: '',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            // orient: 'vertical',
            // right: 0,
            top: '20px',
            formatter: name => {
              const legendData = legendList.filter(item => {
                return item.name == name
              })
              return legendData[0].name + '：' + legendData[0].value + '例 ' + legendData[0].rate + '%'
            }
          },
          grid: {
            top: 60
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: timeLine
          },
          yAxis: {
            name: '例',
            type: 'value'
          },
          series: [{
            name: '濒危',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: riskGradeBW_list
          }, {
            name: '危重',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: riskGradeWZ_list
          }, {
            name: '急症',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: riskGradeJZ_list
          }, {
            name: '亚急',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: riskGradeYJ_list
          }, {
            name: '非急',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: riskGradeFJ_list
          }, {
            name: '死亡',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: riskGradeSW_list
          }, {
            name: '未知',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: riskGradeUnknown_list
          }
          ]
        }
        myChart.setOption(option)
      })
    },
    traumaGetHospitalTransfer() {
      const chartDom = document.getElementById('getHospitalTransfer')
      const myChart = echarts.init(chartDom)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getHospitalTransfer({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (!res.data) {
          this.notHaveData(myChart)
          return
        }
        console.log(res.data)
        if (res.data.totalTransfer === 0) {
          this.notHaveData(myChart)
          return
        }

        const timeLine = []
        const transferInNum_list = []
        const transferOutNum_list = []
        const transferInOutNum_list = []
        const totalTransfer = res.data.totalTransfer
        const subtotalTransferIn = res.data.subtotalTransferIn
        const subtotalTransferOut = res.data.subtotalTransferOut

        const percentTransferIn = res.data.percentTransferIn
        const percentTransferOut = res.data.percentTransferOut

        res.data.transferInOutNumList.forEach(el => {
          timeLine.push(el.year + '-' + el.month)
          transferInNum_list.push(el.transferInNum)
          transferOutNum_list.push(el.transferOutNum)
          transferInOutNum_list.push(el.transferInOutNum)
        })

        const legendList = [
          {
            name: '转院病人总数',
            value: totalTransfer
          }, {
            name: '外院转入总数',
            value: subtotalTransferIn,
            rate: percentTransferIn
          }, {
            name: '本院转出总数',
            value: subtotalTransferOut,
            rate: percentTransferOut
          }]

        const option = {
          color: ['#027DB4', '#F59A23', '#E2596A', '#5EAFAF', '#008B8B', '#D4F2E7'],
          title: {
            text: '',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            // orient: 'vertical',
            // right: 0,
            top: '20px',
            formatter: name => {
              const legendData = legendList.filter(item => {
                return item.name == name
              })
              if (legendData[0].name === '转院病人总数') {
                return legendData[0].name + '：' + legendData[0].value + '例'
              }
              return legendData[0].name + '：' + legendData[0].value + '例 ' + legendData[0].rate + '%'
            }
          },
          grid: {
            top: 60
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: timeLine
          },
          yAxis: {
            name: '例',
            type: 'value'
          },
          series: [{
            name: '转院病人总数',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: transferInOutNum_list
          }, {
            name: '外院转入总数',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: transferInNum_list
          }, {
            name: '本院转出总数',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: transferOutNum_list
          }
          ]
        }
        myChart.setOption(option)
      })
    },
    tramuaGetTransferInNums() {
      this.tableInData = []
      getTransferInNums({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (res.code == 0) {
          if (res.data) {
            if (res.data.transferInHospitalNums && res.data.transferInHospitalNums.length > 0) {
              this.tableInData = res.data.transferInHospitalNums
            }
          }
        }
      })
    },
    tramuaGetTransferOutNums() {
      this.tableOutData = []
      getTransferOutNums({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (res.code == 0) {
          if (res.data) {
            if (res.data.transferOutHospitalNums && res.data.transferOutHospitalNums.length > 0) {
              this.tableOutData = res.data.transferOutHospitalNums
            }
          }
        }
      })
    },
    tramuaGetPatientRatio() {
      const chartDom1 = document.getElementById('getPatientRatio1')
      const myChart1 = echarts.init(chartDom1)
      const chartDom2 = document.getElementById('getPatientRatio2')
      const myChart2 = echarts.init(chartDom2)
      const chartDom3 = document.getElementById('getPatientRatio3')
      const myChart3 = echarts.init(chartDom3)
      window.addEventListener('resize', myChart1.resize)
      window.addEventListener('resize', myChart2.resize)
      window.addEventListener('resize', myChart3.resize)
      myChart1.clear()
      myChart2.clear()
      myChart3.clear()
      getPatientRatio({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (!res.data) {
          this.notHaveData(myChart1)
          this.notHaveData(myChart2)
          this.notHaveData(myChart3)
          return
        }
        console.log(res.data)
        if (res.data.total === 0) {
          this.notHaveData(myChart1)
          this.notHaveData(myChart2)
          this.notHaveData(myChart3)
          return
        }
        this.patientTotal = res.data.total
        const male1 = res.data.patientSexQty.male
        const female1 = res.data.patientSexQty.female
        const sexUnknown1 = res.data.patientSexQty.sexUnknown
        const male11_rate = res.data.patientSexRatio.male
        const female1_rate = res.data.patientSexRatio.female
        const sexUnknown1_rate = res.data.patientSexRatio.sexUnknown

        const age0_17 = res.data.patientAgeQty.age0_17
        const age18_65 = res.data.patientAgeQty.age18_65
        const age66_79 = res.data.patientAgeQty.age66_79
        const age80 = res.data.patientAgeQty.age80
        const ageUnknown = res.data.patientAgeQty.ageUnknown

        const age0_17_rate = res.data.patientAgeRatio.age0_17
        const age18_65_rate = res.data.patientAgeRatio.age18_65
        const age66_79_rate = res.data.patientAgeRatio.age66_79
        const age80_rate = res.data.patientAgeRatio.age80
        const ageUnknown_rate = res.data.patientAgeRatio.ageUnknown

        const preHospital = res.data.preInHospitalQty.preHospital
        const inHospital = res.data.preInHospitalQty.inHospital
        const unkown = res.data.preInHospitalQty.unkown
        const preHospital_rate = res.data.preInHospitalRatio.preHospital
        const inHospital_rate = res.data.preInHospitalRatio.inHospital
        const unknown_rate = res.data.preInHospitalRatio.unknown

        const diagMain1 = [
          { value: male1, name: '男', rate: male11_rate },
          { value: female1, name: '女', rate: female1_rate },
          { value: sexUnknown1, name: '未知', rate: sexUnknown1_rate }
        ]

        const option1 = {
          colors: ['#027DB4', '#F59A23', '#E2596A'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: '15%',
            formatter: name => {
              const nameList = diagMain1.filter(item => {
                return item.name == name
              })
              return nameList[0].name + '：' + nameList[0].value + '例' + ' ' + nameList[0].rate + '%'
            }

          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '80%',
              data: diagMain1,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart1.setOption(option1)

        const diagMain2 = [
          { value: age0_17, name: '未成年人（0-17岁）', rate: age0_17_rate },
          { value: age18_65, name: '青年人（18-65岁）', rate: age18_65_rate },
          { value: age66_79, name: '中年人（66-79岁', rate: age66_79_rate },
          { value: age80, name: '老年人（80-90岁以上）', rate: age80_rate },
          { value: ageUnknown, name: '未知', rate: ageUnknown_rate }
        ]

        const option2 = {
          colors: ['027DB4', 'F59A23', 'EC808D', '02A7F0', '81D3F8', '1557A4', '#1557a435'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: 0,
            formatter: name => {
              const nameList = diagMain2.filter(item => {
                return item.name == name
              })
              return nameList[0].name + '：' + nameList[0].value + '例' + ' ' + nameList[0].rate + '%'
            }

          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '80%',
              data: diagMain2,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart2.setOption(option2)

        const diagMain3 = [
          { value: preHospital, name: '院前', rate: preHospital_rate },
          { value: inHospital, name: '院内', rate: inHospital_rate },
          { value: unkown, name: '未知', rate: unknown_rate }
        ]

        const option3 = {
          colors: ['#027DB4', '#F59A23', '#E2596A'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: '15%',
            formatter: name => {
              const nameList = diagMain3.filter(item => {
                return item.name == name
              })
              return nameList[0].name + '：' + nameList[0].value + '例' + ' ' + nameList[0].rate + '%'
            }

          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '80%',
              data: diagMain3,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart3.setOption(option3)
      })
    },
    tramuaGetDepartureQty() {
      const chartDom = document.getElementById('getDepartureQty')
      const myChart = echarts.init(chartDom)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getDepartureQty({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (!res.data) {
          this.notHaveData(myChart)
          return
        }
        console.log(res.data)
        if (res.data.total === 0) {
          this.notHaveData(myChart)
          return
        }
        const timeLine = []
        const qtyDeparture_list = []
        res.data.departureQties.forEach(el => {
          timeLine.push(el.year + '-' + el.month)
          qtyDeparture_list.push(el.qtyDeparture)
        })
        const option = {
          color: ['#027DB4', '#F59A23', '#E2596A', '#5EAFAF', '#008B8B', '#D4F2E7'],
          title: {
            text: '',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: 60
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: timeLine
          },
          yAxis: {
            name: '次',
            type: 'value'
          },
          series: [{
            name: '出车次数',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: qtyDeparture_list
          }
          ]
        }
        myChart.setOption(option)
      })
    },
    exportPPt() {
      const pres = new pptxgen() // 创建PPT对象
      const slide = pres.addSlide() // 新建幻灯片
      // 给幻灯片添加内容
      slide.background = { path: ppt1 }
      // slide.addText("Hello World from PptxGenJS...", {
      //     x: 1.5,
      //     y: 1.5,
      //     color: "363636",
      //     align: pres.AlignH.center,
      // });

      pres.writeFile({ fileName: 'test.pptx' })
    }

  }
}
</script>

<style lang="less" scoped>
.trauma-process {
    width: 100%;
    height: 100%;

    &_content {
        height: calc(100% - 59px);
        overflow-y: auto;
    }

    .dignosis-content {
        width: 100%;
        height: 400px;
        display: inline-block;

        .dignosis-style {
            // display: inline-block;
            width: 100%;
            height: 60%;
        }

        .dignosis-div {
            display: inline-block;
            width: 50%;
            height: 100%;
        }
    }

    .treatment-process-card {
        height: 400px;
    }

    .box-card+.box-card {
        margin-top: 5px;
    }

    /deep/.el-radio__label {
        line-height: 38px;
    }

    .box-echart {
        height: ~'calc(100% - 80px)';
        overflow: auto;
        background: #f0f2f5;
        padding: 20px 20px 0 20px;

        .box-card {
            width: 32%;
            height: 506px;
            display: inline-block;
            margin: 0 10px;

            .el-card__body {
                height: ~'calc(100% - 55px)';
            }
        }
    }
}
</style>
